<template>
	<view class="index-view">
		<view class="top-bar"><uni-navbar :fixed="true" :back="false" color="#fff" :title="title"></uni-navbar></view>
		<view class="logo-box">
			<view class="logo-ttl">
				<view class="h1" :style="{ 'margin-top': statusBarHeight }">{{ title }}</view>
				<view class="banner"><u-swiper :list="swiperList" mode="none" height="280" @click="swiperClick"></u-swiper></view>
				<view class="bg-img"><image src="/static/img/index_bg01.png" mode="widthFix"></image></view>
			</view>
		</view>

		<view class="index-card">
			<u-row class="card-link" gutter="26" align="top">
				<u-col span="6" v-if="$sysMenus('tabl')">
					<navigator hover-class="none" class="link-item" url="/pagesB/proposal/index">
						<image class="image" src="/static/img/index_img_01.png" mode="aspectFill"></image>
						<!-- <view class="text">建议办理</view> -->
					</navigator>
				</u-col>
				<u-col span="6" v-if="$sysMenus('perform')" @click="perform()">
					<view hover-class="none" class="link-item">
						<image class="image" src="/static/img/index_img_02.png" mode="aspectFill"></image>
						<!-- <view class="text">履职评价</view> -->
					</view>
				</u-col>

				<u-col span="6" v-if="$sysMenus('shuanglian')">
					<navigator hover-class="none" class="link-item" url="/pagesA/condi/list">
						<image class="image" src="/static/img/index_img_03.png" mode="aspectFill"></image>
						<!-- <view class="text">三联工作</view> -->
					</navigator>
				</u-col>

				<u-col span="6" v-if="$sysMenus('dagl')">
					<navigator hover-class="none" class="link-item" url="/pagesB/united/index">
						<image class="image" src="/static/img/index_img_04.png" mode="aspectFill"></image>
						<!-- <view class="text">代表档案</view> -->
					</navigator>
				</u-col>

				<u-col span="6" v-if="$sysMenus('dcwj')">
					<navigator hover-class="none" class="link-item" url="/pagesB/question/list">
						<image class="image" src="/static/img/index_img_05.png" mode="aspectFill"></image>
						<!-- <view class="text">调查问卷</view> -->
					</navigator>
				</u-col>

				<u-col span="6" v-if="$sysMenus('jyzjlf')">
					<navigator hover-class="none" class="link-item" url="/pagesB/removal/list">
						<image class="image" src="/static/img/index_img_06.png" mode="aspectFill"></image>
						<!-- <view class="text">任免公告</view> -->
					</navigator>
				</u-col>
			</u-row>
		</view>

		<block v-if="$sysMenus('tzgg_top')">
			<view class="com-h2">
				<view class="h2-title">通知公告</view>
				<navigator hover-class="none" class="h2-col" url="/pagesB/notice/list">查看更多</navigator>
			</view>

			<view class="list-box" :style="{ background: Notice.loading == 'nodata' ? 'none' : '#fff' }">
				<view class="list-info_01" v-for="(item, index) of Notice.list" :key="item.id" @click="navTo('/pagesB/notice/detail?id=' + item.id)">
					<view class="info-title">{{ item.title }}</view>
					<view class="info-btm">
						<view class="btm-left clamp">
							<text class="left-name">{{ item.userName }}</text>
							<text class="left-time">{{ item.createTime | parseTime('{y}-{m}-{d}') }}</text>
						</view>
					</view>
				</view>
				<u-loadmore :status="Notice.loading" />
			</view>
		</block>

		<u-back-top :scroll-top="scrollTop" top="200"></u-back-top>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	data() {
		return {
			title: '安丘市人大代表履职通',
			statusBarHeight: '0',
			text: '',
			list: [['', '']],
			swiperList: [],
			scrollTop: 0,
			current: 0,
			tabList: [
				{
					name: '通知公告',
					count: '0'
				},
				{
					name: '任免公告',
					count: '0'
				}
			],
			Notice: {
				list: [],
				pageNum: 1,
				pageSize: 10,
				readType: '',
				announcements: {
					dataType: '1',
					title: ''
				},
				loaded: false,
				loading: 'loadmore'
			},
			Removal: {
				list: [],
				pageNum: 1,
				pageSize: 10,
				param: {
					title: '',
					type: '1',
					nodeStatus: '3'
				},
				loaded: false,
				loading: 'loadmore'
			}
		};
	},
	onLoad() {
		this.loadLogin();
		this.loadData();

		this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'rpx';
		console.log(this.statusBarHeight);
	},
	onShow() {
		this.loadLogin();
	},
	onPullDownRefresh() {
		this.loadData('refresh');
	},
	onShareAppMessage(res) {
		return {
			title: this.title,
			path: '/pages/index/index'
		};
	},
	onShareTimeline(res) {
		return {};
	},
	onReachBottom() {
		if (this.current == 0 && this.Notice.loading == 'loadmore') this.loadNotice('add');
		if (this.current == 1 && this.Removal.loading == 'loadmore') this.loadRemoval('add');
	},
	onPageScroll(res) {
		this.scrollTop = res.scrollTop;
	},
	computed: {
		...mapState(['userInfo', 'sysUser'])
	},
	methods: {
		loadLogin() {
			if (this.userInfo.Authorization) {
				this.clientCode = this.userInfo.sysUser.clientCode;
				this.roleCodes = this.userInfo.roleCodes.join(',');
				this.userId = this.userInfo.sysUser.id;
				this.userName = this.userInfo.sysUser.userName;
				this.title = `${this.userInfo.sysUser.clientName}人大代表履职通`;

				uni.setNavigationBarTitle({
					title: this.title
				});
			} else {
				this.$logout();
			}
		},
		loadData(type = 'add') {
			this.getBanner();
			this.getBaiduToken();
			this.loadDict('tip', 'tip');

			this.loadNotice(type);
			this.loadRemoval(type);
		},
		loadNotice(type = 'add') {
			if (type == 'add') {
				if (this.Notice.loading == 'nomore') {
					return false;
				}
				this.Notice.loading = 'loading';
			} else {
				this.Notice.loading = 'loading';
			}
			if (type != 'add') {
				this.Notice.pageNum = 1;
			}
			let data = {
				pageNum: this.Notice.pageNum,
				pageSize: this.Notice.pageSize,
				currentUserId: this.userId,
				roleCodes: this.roleCodes,
				clientCode: this.clientCode,
				readType: this.Notice.readType,
				announcements: this.Notice.announcements
			};
			this.$request('/announcements/myList', data).then((res) => {
				let count = 0;
				if (type != 'add') {
					uni.stopPullDownRefresh();
					this.Notice.list = [];
				}

				this.Notice.loading = this.Notice.pageNum < Math.ceil(res.data.total / this.Notice.pageSize) ? 'loadmore' : 'nomore';
				this.Notice.pageNum = this.Notice.pageNum + 1;
				this.Notice.list = this.Notice.list.concat(res.data.records);
				this.Notice.loaded = true;
				if (this.Notice.list.length <= 0) {
					this.Notice.loading = 'nodata';
				}
			});
		},
		loadRemoval(type = 'add') {
			if (type == 'add') {
				if (this.Removal.loading == 'nomore') {
					return false;
				}
				this.Removal.loading = 'loading';
			} else {
				this.Removal.loading = 'loading';
			}
			if (type != 'add') {
				this.Removal.pageNum = 1;
			}
			let data = {
				pageNum: this.Removal.pageNum,
				pageSize: this.Removal.pageSize,
				currentUserId: this.userId,
				roleCodes: this.roleCodes,
				clientCode: this.clientCode,
				...this.Removal.param
			};
			this.$request('/dushuxuexi/article/list', data).then((res) => {
				let count = 0;
				if (type != 'add') {
					uni.stopPullDownRefresh();
					this.Removal.list = [];
				}

				this.Removal.loading = this.Removal.pageNum < Math.ceil(res.data.total / this.Removal.pageSize) ? 'loadmore' : 'nomore';
				this.Removal.pageNum = this.Removal.pageNum + 1;
				this.Removal.list = this.Removal.list.concat(res.data.records);
				this.Removal.loaded = true;
				if (this.Removal.list.length <= 0) {
					this.Removal.loading = 'nodata';
				}
			});
		},
		getBaiduToken() {
			this.$request('/baidu/ttsToken', {
				clientCode: this.clientCode,
				userId: this.userId
			}).then((res) => {
				uni.setStorageSync('baiduToken', res.data);
			});
		},
		getBanner() {
			this.$request('/banner/list', {
				clientCode: this.clientCode,
				userId: this.userId,
				banner: {
					enable: '1'
				}
			}).then((res) => {
				if (!res.data) {
					return false;
				}
				this.swiperList = [];
				res.data.records.forEach((item) => {
					if (item.fileList && item.fileList.length > 0) {
						this.swiperList.push({
							id: item.id,
							title: item.title,
							url: item.externalLink,
							image: this.$imagePreview(item.fileList[0].path)
						});
					}
				});
				uni.setStorageSync('swiperList', this.swiperList);
			});
		},
		swiperClick(index) {
			// this.current = index;
			if (this.swiperList[index].id) {
				uni.navigateTo({
					url: '/pagesA/banner/detail?id=' + this.swiperList[index].id
				});
			}
		},
		tabsChange(index) {
			this.current = index;
		},
		loadDict(type, key) {
			uni.setStorageSync('tip', '');
			this.$request('/system/sys-dict/dictList', {
				clientCode: this.clientCode,
				sysDict: {
					dictType: type
				}
			}).then((res) => {
				if (!res.data) {
					return false;
				}
				let tip = res.data[0].dictValue;
				uni.setStorageSync('tip', tip);
			});
		},
		perform() {
			if (this.$sysMenus('perform_eval')) {
				uni.navigateTo({
					url: '/pagesA/duties/index'
				});
			} else {
				uni.navigateTo({
					url: '/pagesA/duties/self'
				});
			}
		},
		navTo(url) {
			uni.navigateTo({
				url: url
			});
		}
	}
};
</script>

<style lang="scss">
.logo-box {
	// text-align: center;

	.logo-ttl {
		position: relative;
		padding: 50rpx 30rpx 20rpx;
		// height: 500rpx;
	}

	.h1 {
		position: relative;
		font-size: 18px;
		font-weight: 600;
		color: #fff;
		line-height: 64rpx;
		z-index: 1;
	}

	.h1-img {
		position: relative;
		margin: 250rpx auto 0;
		width: 706rpx;
		height: 216rpx;
		z-index: 1;

		.image {
			width: 706rpx;
			height: 216rpx;
		}
	}

	.bg-img {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
	}

	.bg-img_small {
		position: relative;
		margin: 80rpx auto 0;
		width: 680rpx;
		height: 280rpx;
		z-index: 10;
	}
}

.banner {
	position: relative;
	margin: 80rpx auto 0;
	padding: 0;
	min-height: 280rpx;
	z-index: 10;
}

.list-box {
	padding: 0 30rpx;
	background-color: #fff;
	border-top: 1rpx solid #f1f2f3;
}

.index-card {
	position: relative;
	margin: 0 auto 20rpx;
	padding: 28rpx 18rpx 4rpx;
	border-radius: 12rpx;
	background-color: #fff;

	.card-ttl {
		margin-bottom: 16rpx;
		padding-left: 20rpx;
		font-size: 16px;
		font-weight: bold;
		color: #444;
		border-left: 10rpx solid #f00;
	}

	.card-box {
		display: flex;
		justify-content: space-between;
		padding: 40rpx 0 10rpx;
		border-top: 1rpx solid #ebebeb;

		.card-item {
			width: 190rpx;
		}
	}

	.card-link {
		overflow: hidden;

		.image {
			margin: 0 auto 24rpx;
			width: 332rpx;
			height: 160rpx;
			object-fit: contain;
		}

		.link-item {
			display: flex;
			flex-direction: column;
			justify-content: center;
			min-height: 160rpx;
			font-size: 14px;
			line-height: 1.1;
			text-align: center;
		}
	}
}

.pro-row {
	.pro-title {
		margin-bottom: 20rpx;
		font-size: 15px;
		color: #e5231a;
	}
}
</style>
